<template>
  <view class="box">
    <view class="head">
      <u-icon name="map-fill" size="45" color="white"></u-icon>
      <u-icon name="bell" size="45" color="white"></u-icon>
    </view>

    <!-- 轮播图 -->
    <swiper class="swiper" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
      <swiper-item v-for="(image, index) in images" :key="index">
        <image :src="image.path" class="slide-image" @click="previewImage(image.path)" @error="handleImageError"></image>
      </swiper-item>
    </swiper>

    <!-- 消息通知条 -->
    <view class="notification-bar">
      <div class="marquee-text">
        2024年12月11日 今日天气：多云，温度：25度，湿度：60%，空气质量：良， pm2.5指数：30，空气质量指数：良,适合游玩......
      </div>
    </view>

    <view v-for="(notice, index) in noticeList" :key="index" class="notice-item" @click="showNotice(index)">
      <uni-card :title="'公告标题：' + notice.title" :extra="'创建时间：' + notice.createTime" is-full>
        <view class="notice-content">
          <image :src="notice.noticePath" class="notice-image" @click="previewImage(notice.noticePath)" @error="handleImageError"></image>
          <view class="notice-username">提交人：{{ notice.username }}</view>
        </view>
      </uni-card>
    </view>
  </view>

</template>

<script>
import { onMounted } from "vue";
import SearchValue from '../search/search.vue';
import { getNoticeList } from "@/api/notice.js";

export default {
  components: {
    SearchValue
  },
  data() {
    return {
      images: [
        { path: '/static/notice1.jpg' },
        { path: '/static/notice2.jpg' },
        { path: '/static/notice3.jpg' },
        { path: '/static/notice4.jpg' },
      ],
      indicatorDots: true,
      autoplay: true,
      interval: 3000,
      duration: 500,
      noticeList: [], // 用于存放获取到的订单列表数据
      currentNoticeIndex: null // 用于记录当前点击的公告索引，初始化为null
    }
  },
  mounted() {
    this.getNotice().then(() => {
      console.log('noticeList:', this.noticeList); // 添加日志输出，确认数据是否正确
    });
  },
  methods: {
    async getNotice() { // 改为普通函数
      try {
        let res = await getNoticeList();
        if (res.code === 2000) { // 检查后端返回的状态码
          this.noticeList = res.data; // 直接赋值 res.data
          this.noticeList.forEach(item => {
            item.noticePath = 'http://localhost:8080' + item.noticePath;
          });
          this.$forceUpdate(); // 强制更新视图
        } else {
          console.log('获取公告列表失败', res.msg);
        }
      } catch (error) {
        console.log('获取公告列表失败', error);
      }
    },
    showNotice(index) {
      this.currentNoticeIndex = index;
    },
    search(res) {
      uni.showToast({
        title: '搜索：' + res.value,
        icon: 'none'
      })
    },
    previewImage(url) {
      uni.previewImage({
        urls: [url],
        current: url
      });
    },
    handleImageError(e) {
      console.log('图片加载失败，错误信息：', e);
    }
  }
};
</script>

<style lang="scss" scoped>
.notice-detail {
  width: 90%;
  margin: auto;
  margin-top: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;

  .notice-image {
    width: 100%;
    height: 300rpx;
    margin-bottom: 10rpx;
    border-radius: 10rpx; // 添加圆角效果
    box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1); // 添加阴影效果
    transition: transform 0.3s ease; // 添加过渡效果

    &:hover {
      transform: scale(1.05); // 鼠标悬停时放大图片
    }
  }

  .notice-text {
    width: 100%;

    .notice-title {
      font-size: 35rpx;
      margin-bottom: 10rpx;
      font-weight: bold; // 加粗标题
    }

    .notice-content {
      font-size: 30rpx;
      color: gray;
      line-height: 1.5; // 增加行间距
    }
  }
}

.box {
  width: 100%;
  height: 100%;
  background-color: #f7f7f7; // 更改背景颜色

  .head {
    width: 100%;
    height: 6vh;
    display: flex;
    padding-left: 6%;
    padding-right: 6%;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 1;
    align-items: center; // 垂直居中图标
  }

  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20rpx; // 增加内边距
  }

  .search {
    width: 100%;
    height: 80rpx;
    position: sticky;
    top: 6vh;
    z-index: 1;
    padding: 0 6%; // 增加内边距
  }

  


  .notice-item {
    margin-bottom: 20rpx; // 增加公告项之间的间距
    transition: box-shadow 0.3s ease; // 添加过渡效果

    &:hover {
      box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.2); // 鼠标悬停时增加阴影
    }

    .notice-content {
      .notice-username {
        font-size: 28rpx; // 设置字体大小
        color: #555; // 设置字体颜色
        margin-top: 10rpx; // 设置上边距
      }
    }
  }

  .vediopart {
    width: 90%;
    height: 250rpx;
    margin: auto;
    display: flex;
    margin-top: 2%;

    image {
      width: 45%;
      height: 100%;
      border-radius: 10rpx; // 添加圆角效果
      box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1); // 添加阴影效果
      transition: transform 0.3s ease; // 添加过渡效果

      &:hover {
        transform: scale(1.05); // 鼠标悬停时放大图片
      }
    }
    .notification-bar {
      background-color: #f0f0f0;
      padding: 5px;
      color: #333;
    }

    view {
      display: flex;
      flex-direction: column;
      width: 55%;
      padding-left: 20rpx; // 增加左边距

      .vediotitle {
        font-size: 35rpx;
        padding-top: 25%;
        font-weight: bold; // 加粗标题
      }

      .time {
        font-size: 25rpx;
        padding-top: 2%;
        color: gray;
        line-height: 1.5; // 增加行间距
      }
    }
  }
}
.notification-bar {
  width: 100%;
  overflow: hidden;
  background-color: #ffffff; /* 背景色可以根据需求更改 */
  color: #721c24; /* 文本颜色 */
  padding: 10px 0;
}
.marquee-text {
  display: inline-block;
  white-space: nowrap;
  animation: marquee 10s linear infinite;
}
@keyframes marquee {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}
</style>

<style lang="scss" scoped>
::v-deep .u-search {
  width: 90%;
  padding-left: 10%;
}
</style>
